<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>



    <el-form label-width="120px">

        <el-form-item label="课程标题">
            <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
        </el-form-item>

        <!-- 所属分类 TODO -->
        <!-- 课程分类 -->
        <el-form-item label="课程分类">
        <el-select
            v-model="courseInfo.subjectParentId"
            placeholder="一级分类" @change="subjectLevelOneChanged">
            <el-option
            v-for="subjectOne in subjectOneList"
            :key="subjectOne.id"
            :label="subjectOne.title"
            :value="subjectOne.id"/>
        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
            <el-option
                v-for="subjectTwo in subjectTwoList"
                :key="subjectTwo.id"
                :label="subjectTwo.title"
                :value="subjectTwo.id"/>
        </el-select>
        </el-form-item>

        <!-- 课程讲师 TODO -->
        <!-- 课程讲师 -->
        <el-form-item label="课程讲师">
        <el-select
            v-model="courseInfo.teacherId"
            placeholder="请选择讲师">
            <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
        </el-select>
        </el-form-item>

        <el-form-item label="总课时">
            <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
        </el-form-item>

        <!-- 课程简介 TODO -->
        <!-- 课程简介-->
        <el-form-item label="课程简介">
            <tinymce :height="300" v-model="courseInfo.description"/>
        </el-form-item>

        <!-- 课程封面 TODO -->
        <!-- 课程封面-->
        <el-form-item label="课程封面">
            <!-- show-file-list:显示文件列表
                  on-success:上传成功后的方法
                  before-upload:上传之前的方法 -->
            <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="BASE_API+'/eduoss/fileoss'"
                class="avatar-uploader">
                <img :src="courseInfo.cover">
            </el-upload>

        </el-form-item>

        <el-form-item label="课程价格">
            <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
        </el-form-item>

        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'//引用组件

export default {
  components:{Tinymce},//声明组件
   data(){
       return{
           saveBtnDisabled:false ,//保存按钮是否禁用
           courseInfo:{
               subjectId:'',//二级分类id
               subjectParentId:'',//一级分类id
               teacherId:''
           },
           courseId:'',//用于获取路由中的id值
           BASE_API:process.env.BASE_API,//接口api地址
           teacherList:[],//用于封装所有的讲师的数据
           subjectOneList:[],//用于封装所有的一级分类
           subjectTwoList:[]//用于封装二级分类
       }
   },
   created(){
         this.init()
   },
   watch: {//监听，写法固定
    $route(to, from) {//路由的变化方式，路由发生变化，这个方法就会执行
      console.log('watch $route')
      this.init()
    }
  },
   methods:{
       //路由跳转
       init(){
         //获取路由中的id值
            if(this.$route.params&&this.$route.params.id){
                this.courseId = this.$route.params.id
                //调用根据ID查询课程的方法
                console.log(this.courseId)
                this.getInfo(this.courseId)
            }else{
                  this.courseInfo={
                        subjectId:'',//二级分类id
                        subjectParentId:'',//一级分类id
                        description:'',
                        lessonNum:0,
                        cover:'https://guli-edu-100701.oss-cn-qingdao.aliyuncs.com/default/defaultCover.png',
                        price:0
                  }
                  this.courseId=''
                     //初始化所有讲师
                    this.getListTeacher()
                    //初始化一级分类
                    this.getSubjectOneList()
            }
       },

        //根据课程id查询信息
        getInfo(courseId){
            course.getCourseInfoId(courseId)
            .then(response=>{
                //在courseInfo中包含所有的基本信息，包含一级分类和二级分类的id
                this.courseInfo=response.data.courseInfoVo
                //查询出所有的分类，包含一级和二级分类
                subject.getSubjectList()
                .then(response=>{
                    //获取所有的一级分类
                   this.subjectOneList=response.data.list

                   //把所有的一级分类数组进行遍历，比较当前courseInfo中的一级分类和数组中哪个元素的id值相同
                   for(var i=0;i<this.subjectOneList.length;i++){
                       //获取每个一级分类
                       var OneSubject = this.subjectOneList[i]
                       //比较
                       if(OneSubject.id===this.courseInfo.subjectParentId){
                           //获取一级分类中的所有二级分类
                           this.subjectTwoList=OneSubject.children
                       }
                   }
                })

               //初始化所有讲师
               this.getListTeacher()
            })
        }, 
       //上传封面成功调用的方法 res:response  参数都是框架自动传递过来的
       handleAvatarSuccess(res,file){
           this.courseInfo.cover=res.data.url

       },
       //上传之前的方法:规定上传图片的类型和大小 参数都是框架自动传递过来的
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isPng = file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG&&!isPng) {
                this.$message.error('上传图片只能是 JPG或Png 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
       //点击某个一级分类会触发change事件，显示对应的二级分类
       subjectLevelOneChanged(value){
           //value就是一级分类的id值 框架中会自动做到把一级分类的ID传过来
           //alert(value)
           //遍历所有的分类
           for(let i=0;i<this.subjectOneList.length;i++){
               //每个一级分类
               var oneSubject =this.subjectOneList[i]
               //判断：所有一级分类的id和点击的一级分类id是否一致
               if(value===oneSubject.id){
                   //从一级分类中获取所有的二级分类
                   this.subjectTwoList=oneSubject.children
                   //把二级分类的id值清空
                   this.courseInfo.subjectId=''
               }
           }
       },
       //查询所有一级分类
       getSubjectOneList(){
           subject.getSubjectList()
           .then(response=>{
              this.subjectOneList=response.data.list
           })
       },

       //查询所有讲师
        getListTeacher(){
            course.getListTeacher()
            .then(response=>{
                this.teacherList= response.data.items
            })
        },
         //修改课程信息
       updateCourseInfo(courseInfo){
           course.updateCourseInfo(courseInfo)
           .then(response=>{
               //提示信息
                this.$message({
                    type:'success',
                    message:'修改课程信息成功'
                })
                
                //跳转到第二步中
                this.$router.push({path:'/course/chapter/'+this.courseId})
           })
       },
       //添加课程信息
       addCourse(){
           course.addCourseInfo(this.courseInfo)
                .then(response=>{
                //提示信息
                this.$message({
                    type:'success',
                    message:'添加课程信息成功！'
                })
                //跳转到第二步中
                this.$router.push({path:'/course/chapter/'+response.data.courseId})
            })
       },
       //保存并下一步（可能是修改也可能是添加）
        saveOrUpdate(){
            if(this.courseInfo.id){
                this.updateCourseInfo(this.courseInfo)
             }else{
                 this.addCourse()
             }
            
        }
    }
}
</script>

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>